<template>
	<!-- 预核保工作列表-预核保列表页面 -->
	<div class="fillcontain">
		<el-form :model="searchParams" ref="ruleForm" label-width="100px" class="search_container">
			<el-row>
				<el-col :span="6">
					<el-form-item label="案件号" prop="caseId">
						<el-input v-model="searchParams.caseId" placeholder="案件号"></el-input>
					</el-form-item>
				</el-col>
				<el-col :span="6">
					<el-form-item label="机构" prop="mechanism">
						<el-input v-model="searchParams.mechanism" placeholder="机构"></el-input>
					</el-form-item>
				</el-col>

				<el-col :span="6">
					<el-form-item label="经办人名称" prop="busUserName">
						<el-input v-model="searchParams.busUserName" placeholder="经办人名称"></el-input>
					</el-form-item>
				</el-col>
				<el-col :span="6">
					<el-form-item label="任务状态" prop="checkoutid">
						<el-select v-model="searchParams.routeid" placeholder="任务状态">
							<el-option v-for="item in routeids" :key="item.value" :label="item.name" :value="item.value">
							</el-option>
						</el-select>
					</el-form-item>
				</el-col>
				<el-col :span='6'>
					<el-form-item label="任务启动日期" prop="dealbeginDate">
						<el-col>
							<el-date-picker clearable v-model="searchParams.dealbeginDate" value-format="yyyy-MM-dd " format="yyyy-MM-dd "
							 type="date" placeholder="选择日期" @change="clearTimeSetDefault">
							</el-date-picker>
						</el-col>
					</el-form-item>
				</el-col>
				<el-col :span="8" class="text_right" style="float: right;">
					<el-button type="primary" icon="el-icon-search" @click="search"></el-button>
					<el-button type="primary" plain icon="el-icon-refresh" @click="resetSearch"></el-button>
				</el-col>
			</el-row>
		</el-form>
		<div class="contain">
			<div class="table_container">
				<el-table v-loading="loading" :data="tableData" highlight-current-row header-cell-class-name="table-header-class" :row-style="rowStyle"
				 style="width:100%">
					<el-table-column min-width="100" property="checkoutid" label="检出人" align='center' sortable  show-overflow-tooltip>
					</el-table-column>
					<el-table-column min-width="100" property="companyName" label="分公司" align='center' show-overflow-tooltip>
					</el-table-column>
					<el-table-column min-width="100" property="mechanism" label="机构" align='center' sortable show-overflow-tooltip>
					</el-table-column>
					<el-table-column min-width="140" property="channelName" label="销售渠道" align='center' show-overflow-tooltip>
					</el-table-column>
					<el-table-column min-width="200" property="caseNum" label="案件号" align='center' show-overflow-tooltip>
					</el-table-column>
					<el-table-column min-width="200" property="caseNo" label="关联受理号" align='center' show-overflow-tooltip>
					</el-table-column>
					<el-table-column min-width="120" property="routeName" label="任务状态" align='center' show-overflow-tooltip>
					</el-table-column>
					<el-table-column min-width="120" property="busUserName" label="经办人" align='center' show-overflow-tooltip>
					</el-table-column>
					<el-table-column min-width="120" property="createTime" label="任务启动时间" align='center' show-overflow-tooltip>
					</el-table-column>
					<el-table-column min-width="120" property="dealTime" label="最近处理时间" align='center' show-overflow-tooltip>
					</el-table-column>
					<!-- <el-table-column min-width="120" property="dealTime" label="流转记录" align='center' show-overflow-tooltip>
					</el-table-column> -->
					<el-table-column min-width="80" label="流转记录" align='center' show-overflow-tooltip>
						<template slot-scope="scope">
							<el-button type="text" size="small" @click="showChange(scope.row.taskNo)">流转记录</el-button>
						</template>
					</el-table-column>
					<el-table-column min-width="120" label="预投保资料" align='center' show-overflow-tooltip>
						<template slot-scope="scope">
							<router-link style="color:#7FC1FD;" :to="{name: 'insuranceDetail', params: {taskNo:scope.row.taskNo,prepNo:scope.row.prepNo,routeid:scope.row.routeid,caseNum:scope.row.caseNum,dealTime:scope.row.dealTime}}">详情</router-link>
						</template>
					</el-table-column>
					<el-table-column width="120" property="routeid" v-if="false">
					</el-table-column>
				</el-table>
				<el-row>
					<el-col :span="24">
						<div class="pagination">
							<el-pagination background v-if='paginations.total > 0' :page-sizes="paginations.pageSizes" :page-size="paginations.pageSize"
							 :layout="paginations.layout" :total="paginations.total" :current-page='paginations.pageIndex' @current-change='handleCurrentChange'
							 @size-change='handleSizeChange'>
							</el-pagination>
						</div>
					</el-col>
				</el-row>
			</div>
		</div>

		<!-- 流转/修改记录 -->
		<task-change-list :business="'NB'" :taskNo="changeTaskNo" :drawer="showChangeFlag" @close="hideChange"></task-change-list>

	</div>
</template>

<script>
	import {
		mapGetters
	} from 'vuex'
	// import { getComCheckList } from "@/api/comInquiry";
	import constant from '@/utils/constant';
	import {getSsyOrgMap,warnOutSty} from '@/api/taskCenter/taskCommon';
	import TaskConstants, {
		call
	} from "@/api/taskManager/common"
	import taskChangeList from '../taskChangeList'
	export default {
		components: {
			taskChangeList
		},
		data() {
			return {
				changeTaskNo: "",
				showChangeFlag: false,
				searchParams: {
					routeid:'advance_dcl',
					checkoutid: '',
					busUserName: '',
					caseId: '',
					mechanism: '',
					dealbeginDate: ''
				},
				routeids:[{
					name:'待处理',
					value:'advance_dcl'
				},{
					name:'已处理',
					value:'advance_end'
				},{
					name:'已结案',
					value:'end'
				}],
				preTasks: TaskConstants.preTasks,
				preChannels: TaskConstants.preChannelType,
				emptySearchParams: {},
				tableData: [],
				ssyMap:{},
				
				loading: false,
				//需要给分页组件传的信息
				paginations: {
					total: 0, // 总数
					pageIndex: 1, // 当前位于哪页
					pageSize: 10, // 1页显示多少条
					pageSizes: [5, 10, 15, 20], //每页显示多少条
					layout: "total, sizes, prev, pager, next, jumper" // 翻页属性
				},
				isFirstEnter:false
			}
		},
		activated(){
			this.search();
		    document.onkeydown = (event)=>{
		        var e = event || window.event || arguments.callee.caller.arguments[0];
		        if (e && e.keyCode == 113) {
		            this.search()();
		        }
		    };
		}, 
		created() {
			this.emptySearchParams = JSON.parse(JSON.stringify(this.searchParams));
		},
		mounted() {
			setTimeout(()=>{
				this.isFirstEnter=true;
			},100)
			getSsyOrgMap().then(data => this.ssyMap = data);
			// this.getList();
		},
		methods: {
			rowStyle({ row, rowIndex}) {
				return warnOutSty(row,this.nodeMap);
			},
			getOrgName(value) {
				for (var key in this.ssyMap) {
					if (this.ssyMap[key]["sbusiorgid"] && this.ssyMap[key]["sbusiorgid"] == value) {
						value = this.ssyMap[key]["sorgname"]
						break;
					}
				}
				return value;
			},
			getChannelName(value) {
				for (var key in this.preChannels) {
					if (this.preChannels[key]["key"] && this.preChannels[key]["key"] == value) {
						value = this.preChannels[key]["name"]
						break;
					}
				}
				return value;
			},
			getRoute(value) {
				for (var key in this.preTasks) {
					if (this.preTasks[key]["value"] && this.preTasks[key]["value"] == value) {
						value = this.preTasks[key]["name"]
						break;
					}
				}
				return value;
			},
			showChange(taskNo) {
				this.changeTaskNo = taskNo;
				this.showChangeFlag = true;
			},
			hideChange() {
				this.changeTaskNo = "";
				this.showChangeFlag = false;
			},
			// 综合查询列表
			getList() {
				this.paginations.total = 0;
				this.tableData = [];
				this.searchParams.pageNumber = this.paginations.pageIndex;
				this.searchParams.pageSize = this.paginations.pageSize;
				this.$store.dispatch('loading/CHANGE_LOADING', true)
				call(TaskConstants.apis.preQueryList, this.searchParams, "POST").then(res => {
					this.$store.dispatch('loading/CHANGE_LOADING', false)
					if (res.resultCode == constant.SUCCESS && res.data && res.data.list.length) {
						this.paginations.total = res.data.total;
						this.tableData = res.data.list;
						this.tableData.forEach(item => {
							item['routeName'] = this.getRoute(item.routeid);
							item["companyName"] = this.getOrgName(item.companyid);
							item["channelName"] = this.getChannelName(item.channel);
						})
					} else {
						this.$message.error("无符合条件任务！");
					}
				}).catch(err => {
					this.$store.dispatch('loading/CHANGE_LOADING', false);
				})
			},
			// 每页多少条切换
			handleSizeChange(pageSize) {
				this.paginations.pageSize = pageSize;
				this.getList();
			},
			// 上下分页
			handleCurrentChange(page) {
				this.paginations.pageIndex = page;
				this.getList();
			},
			// 根据条件查询列表
			search() {
				this.paginations.pageIndex = 1;

				this.getList();
			},
			// 清除查询条件
			resetSearch() {
				this.searchParams = JSON.parse(JSON.stringify(this.emptySearchParams));
			},
			clearTimeSetDefault(val) {
				if (val == null) {
					val = '';
				}
			},
		},
		computed: {
			...mapGetters(['tags']),
			reload() {
				return this.$store.state.loading.reload;
			}
		},
		activated() {
			if (this.reload) {
				this.$store.dispatch('loading/CHNAGE_RELOAD', false)
				Object.assign(this.$data, this.$options.data());
			}
			document.onkeydown = (event)=>{
				var e = event || window.event || arguments.callee.caller.arguments[0];
				if (e && e.keyCode == 113) {
					this.getList();
				}
			};
		}
	}
</script>

<style lang="less" scoped>
	.fillcontain {
		padding-bottom: 0;
	}

	.contain {
		background: #fff;
		padding: 10px;
		margin-bottom: 20px;
	}

	.pagination {
		padding: 10px 20px;
		text-align: right;
	}

	.operationIcon {
		// padding: 12px;
		border: 1px solid #e5e5e5;
		border-radius: 50%;
		width: 22px;
		height: 22px;
		display: inline-block;
		cursor: pointer;
		box-shadow: 0 0 3px #f9f9f9;

		.svg-icon {
			font-size: 14px;
			fill: #68a3fc;
		}
	}

	.search_container {
		padding: 20px 20px 0 20px;
		border-top: 1px solid #e1e1e1;
	}
</style>
